html,
body {
  margin: 0;
  font-family: "PingFang SC", "Microsoft Yahei", sans-serif;
}

* {
  box-sizing: border-box;
}

ul,
li {
  margin: 0;
  padding: 0;
}

body {
  background-color: #1e272e;
}

nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

ul {
  position: relative;
  display: flex;
}

ul li {
  /* 如果设置为inline-block，会有空隙 */
  /* https://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements */
  list-style: none;
  width: 120px;
  line-height: 40px;
  text-align: center;
}

ul li a {
  color: white;
  text-decoration: none;
}

.slider {
  width: 100px;
  height: 40px;
  background-color: #5352ed;
  border-radius: 4px;
  position: absolute;
  left: 10px;
  bottom: 0;
  z-index: -1;
  transition: all ease 0.4s;
  animation: 2s ease-in-out waves infinite;
}

li:nth-child(1):hover ~ .slider {
  left: 10px;
}

li:nth-child(2):hover ~ .slider {
  left: 128px;
}

li:nth-child(3):hover ~ .slider {
  left: 248px;
}

li:nth-child(4):hover ~ .slider {
  left: 368px;
}

li:nth-child(5):hover ~ .slider {
  left: 488px;
}

@keyframes waves {
  from {
    clip-path: polygon(
      0% 17%,
      9% 10%,
      18% 4%,
      30% 0%,
      43% 1%,
      49% 4%,
      57% 7%,
      66% 10%,
      78% 11%,
      89% 11%,
      96% 9%,
      100% 7%,
      100% 100%,
      0% 100%
    );
  }
  50% {
    clip-path: polygon(
      0% 4%,
      6% 9%,
      13% 13%,
      23% 15%,
      31% 16%,
      42% 15%,
      49% 13%,
      61% 10%,
      71% 5%,
      81% 3%,
      90% 2%,
      100% 5%,
      100% 100%,
      0% 100%
    );
  }
  to {
    clip-path: polygon(
      0% 17%,
      9% 10%,
      18% 4%,
      30% 0%,
      43% 1%,
      49% 4%,
      57% 7%,
      66% 10%,
      78% 11%,
      89% 11%,
      96% 9%,
      100% 7%,
      100% 100%,
      0% 100%
    );
  }
}
